# 1. BFC（Block Formatting Context）块级格式化上下文
# BFC 定义
BFC(Block formatting context)直译为"块级格式化上下文"。是一个拥有独立渲染区域的盒子(也可以理解为结界)，规定了内部元素如何布局，并且盒子内部元素与外部元素互不影响。所有元素都会属于某一个BFC。
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
# BFC布局规则：BFC内部元素所具有的超能力和设置为BFC的元素所具有的超能力
- BFC内部（不一定多个都属于同一个BFC，其实就是html具有的功能，所有元素都在html内部），盒在垂直方向一个接一个地放置，从包含块的顶部开始。(块级元素特性)
- 在同一个BFC中（不能是属于不同BFC的元素），相邻块级盒之间的垂直外边距会合并。
- 设置为BFC的元素不会与float box重叠。(float box不在BFC内部)
- 设置为BFC的元素计算高度时，内部所有的浮动元素也参与计算。也就是清除了设置为BFC元素的内部浮动。
# 创建BFC：
- 根元素，即HTML元素
- float的值不为none
- overflow的值不为visible
- display的值为inline-block, table-cell, table-caption, flex, inline-flex
- position的值为absolute或fixed
# BFC有哪些作用：
- 自适应两栏布局
- 可以阻止元素被浮动元素覆盖
- 可以包含浮动元素——清除内部浮动
- 分属于不同的BFC时可以阻止margin重叠
https://www.jianshu.com/p/7e04ed3f4bea (opens new window)
https://www.cnblogs.com/lhb25/p/inside-block-formatting-ontext.html (opens new window)